<template>
	<view class="min-vh-100 bg-theme flex-col  w-100">
		<view class="  brs-12 mt-12  hh position-relative">
			<view class="d-flex flex-column px-3 reserva">
				<view class="card h-100  pt-12">
					<view class="bg-white d-flex content w-100">
						<view class="d-flex justify-content-between flex-1">
							<view class="d-flex justify-content-between flex-1 align-items-center">
								<view class="detail flex-1">
									<view class="d-flex font-14 font-500 text-AAB5BF align-items-center pb-2 ">
										<view class="text-222426 font-20 font-600 flex-1">
											{{card.store.store_name}}
										</view>
									</view>
									<view class="d-flex font-14 font-500 text-AAB5BF align-items-center pb-2">
										<view class="text-222426 font-20 font-500" style="width: 100%;">
											{{card.room.room_name}}
										</view>
									</view>
									<view class="d-flex font-14 font-500  align-items-center pb-1 flex-1">
										<view class="text-666D73">
											自助开锁生效期：
										</view>
										<view class="font-14  text-222426 flex-1">
											<text
												class="font-500">{{moment(card.starttime).subtract(card.unlock_inadvance_min, 'm').format('YYYY-MM-DD')}}</text>
											<text
												class="font-bold ps-1">{{moment(card.starttime).subtract(card.unlock_inadvance_min, 'm').format('HH:mm')}}</text>
											<text class="font-bold ps-1">- {{card.endtime|setTime('HH:mm')}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flex-col mb-1" v-if="card.store.store_pwd">
			<view class="brs-12 bg-white mx-3 passrord">
				<view class="title">门店开锁密码</view>
				<view class="pass">{{card.store.store_pwd}}</view>
			</view>
		</view>

		<view class="flex-col  pb-4 pt-12">
			<view class="brs-12 bg-white mx-3 cards">
				<view style="display: inline-block; margin-top: 24rpx;margin-left: 32rpx;">
					<view style="font-size: 28rpx;font-weight: 600;">
						密码开锁
					</view>
					<view style="width: 100%; height: 8rpx; background-color: #D85886;margin-top: 4rpx;"></view>
				</view>
				<view class="" style="padding-bottom: 80rpx;">
					<view class="tip">
					</view>
					<view class="d-flex justify-content-center">
						<view
							class="font-24 font-bold text-white text-black pass d-flex flex-column justify-content-center align-items-center">
							<text>{{ card.opendoor_pwd}}</text>
						</view>
					</view>
				</view>
				<view class="d-flex flex-column align-items-center  ">
					<view class="d-flex align-items-center pb-1">
						<image src="../../static/imgs/warning.png" mode=""></image>
						<text class="text-222426 font-14 font-600 ps-1">注意</text>
					</view>
					<view class="font-14 text-222426">开锁密码在生效期内显示</view>
					<view class="font-14 text-222426" :style="{'visibility':current?'hidden':'inherit'}">点击开锁前，先触摸<text
							class="font-bold">“按键区”</text> 激活锁</view>
				</view>
				<view class="kfdh d-flex align-items-center justify-content-center"
					@click="makePhoneCall(card.store.store_mobile)">
					<image src="../../static/imgs/kf.png" mode=""></image>
					<text class="ps-1 font-14 font-500 text-222426">紧急电话</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import {
	// 	cardData
	// } from '../../common/commonData.js';
	import moment from 'moment';
	
	export default {
		data() {
			return {
				moment: moment,
				card: {
					tts_bluelockdata: '',
					tts_randkeypwd: '',
					store: {
						store_name: ''
					},
					room: {
						room_name: ''
					}
				},
				consume_list: [],
				showpass: false,
				lockSuccess: false,
				id: '',
				lockMessage: '',
				show: false,
				content: '距离开锁时间还有',
			};
		},
		onLoad({
			id
		}) {
			this.id = id
		},
		onShow() {
			this.getDetail(this.id)
		},
		methods: {
			updateInfo(){
				this.getDetail(this.id)
			},
			getDetail(id) {
				this.$u.api.getMyReserveDetail({
					id
				}).then(({
					data
				}) => {
					console.log(data);
					this.card = data
					if (+data.re_status == 2) {
						uni.showModal({
							title: '温馨提示',
							content: '此舞蹈室已取消预约',
							showCancel: false,
							success: () => {
								this.$u.route({
									url: '/pages/myReservation/myReservation',
									type: 'tab'
								})
							}
						})
					}
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.passrord {
		height: 220rpx;
		padding: 0 32rpx;

		.title {
			font-weight: 600;
			font-size: 32rpx;
			color: #222426;
			padding-top: 24rpx;
		}

		.pass {
			padding-top: 28rpx;
			font-weight: 600;
			font-size: 64rpx;
			color: #000000;
			text-align: center;
		}
	}

	.reserva {
		>view:last-child {
			padding-bottom: 26rpx;
		}
	}


	.card {
		&-top {
			background-color: #C7D6FF;

		}

		.content {
			padding: 40rpx 32rpx;
			border-radius: 12px;

			.pic {
				border-right: 2rpx solid #F5F7F8;
			}

		}
	}

	.cards {
		min-height: 70vh;

		.tip {
			height: 160rpx;
			line-height: 160rpx;

			.img-45 {
				width: 45rpx;
				height: 45rpx;
			}
		}

		.bg-fail {
			background-color: #769AF5;
		}

		.bg-success {
			background: linear-gradient(135deg, #182EDB 0%, #2D58ED 100%);
		}

		.bg-expire {
			background-color: #D4DADF;
			font-weight: bold;
			color: #666D73;
		}

		.lock {
			width: 240rpx;
			height: 240rpx;
			// line-height: 240rpx;
			border-radius: 50%;
		}

		.pass {
			width: 240rpx;
			height: 240rpx;
		}

		.empty {
			padding-top: calc(30vh - 244rpx);
		}

		image {
			width: 36rpx;
			height: 36rpx;
		}

		.kfdh {
			padding-top: 210rpx;
			padding-bottom: 20rpx;
		}
	}

	.pt-12 {
		padding-top: 26rpx;
	}
</style>